
<template>
  <!-- //需要给VueDragResize套一个div -->
  <div id="DragCells">
    <!-- //缩放功能主要是缩放VueDrangResize标签 -->
    <el-row style="height: 100%">
      <el-col :span="20" style="height: 100%; padding:10px;">
        <div style="background-color: aliceblue;height:100%;">
          <VueDragResize
            :isActive="true"
            :snapToGrid="true"
            :parentLimitation="true"
            :w="200"
            :h="200"
            v-on:resizing="resize"
            v-on:dragging="resize"
            style="background: beige;"
          >
            <h3>Hello World!</h3>
            <p>{{ top }} х {{ left }}</p>
            <p>{{ width }} х {{ height }}</p>
          </VueDragResize>

          <VueDragResize
            :isActive="true"
            :snapToGrid="true"
            :parentLimitation="true"
            :w="200"
            :h="200"
            v-on:resizing="resize"
            v-on:dragging="resize"
            style="background: beige;"
            >
            <h3>Hello World!</h3>
          </VueDragResize>
        </div>
      </el-col>
      <el-col :span="4" style="height: 100%; padding:10px;">
        <div style="background-color: #cce6ff;height:100%;"></div>
      </el-col>
    </el-row>
  </div>
  <!-- 为了缩放图片，所以给img标签外套一个div,动态获取宽高，宽高就是VueDragResize的宽高一样这样就可以实现缩放大小 -->
</template>
<script>
// DEMO
// http://kirillmurashov.com/vue-drag-resize/
// 文档
// https://github.com/kirillmurashov/vue-drag-resize

import VueDragResize from "vue-drag-resize";
export default {
  name: "DragCells",
  components: {
    VueDragResize,
  },
  data() {
    return {
      width: 0,
      height: 0,
      top: 0,
      left: 0,
    };
  },

  methods: {
    resize(newRect) {
      this.width = newRect.width;
      this.height = newRect.height;
      this.top = newRect.top;
      this.left = newRect.left;
    },
  },
};
</script>
<style>
.cells {
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 30px;
  right: 300px;
  box-shadow: 0 0 2px #aaa;
  background-color: rgb(177, 54, 54);
}
</style>